<template>
	<!-- 订单列表 -->
	<view>
		<u-navbar :title="title" :autoBack="true" :placeholder="true"></u-navbar>
		<view class="tabsBox">
			<u-tabs :list="tabsList" :current="tabsActive" @click="tabsClick" lineWidth="40" lineColor="#84878d"
				:activeStyle="{
		    color: '#84878d',
		    fontWeight: 'bold',
		    transform: 'scale(1.05)'
		}" :inactiveStyle="{
		    color: '#93969e',
		    transform: 'scale(1)'
		}" itemStyle="padding-left: 15px; padding-right: 15px; height: 40px;"></u-tabs>
		</view>
		<view class="card goodItem" v-for="item in orderList" :key="item.order_no" @click="itemClick(item)">
			<view class="goodItem-title">
				<text>订单编号:{{item.order_no}}</text>
				<text class="titleYes"
					:class="{'textColor':item.order_status===7 ||item.order_status===11}">{{item.order_status | status}}</text>
			</view>
			<view class="goodItem-main">
				<image :src="item.goodslist[0].goods_image" mode=""></image>
				<view class="center u-line-2">
					{{item.goodslist | allName}}
				</view>
				<view class="right">
					<view>
						<text style="font-size: 20rpx;">¥</text>
						<text>{{item.pay_price}}</text>
					</view>

					<template v-if="type==1">
						<view style="color: #969799;font-size: 24rpx;">
							共{{item.goodslist | allNum}}件
						</view>
					</template>

				</view>
			</view>
			<view class="goodItem-footer">
				<template v-if="item.order_status===1">
					<text class="text" @click.stop="btnClick(1,item.id)">取消订单</text>
				</template>

				<template v-if="item.order_status===2">
					<text class="text success" @click.stop="btnClick(2,item.id)">确认完成</text>
				</template>

				<template v-if="item.order_status===1">
					<text class="text success"
						@click="toUrl(`/subPages/orderDetails/orderDetails?id=${item.id}`)">支付订单</text>
				</template>

				<template v-if="item.order_status===7&&item.is_kaipiao===0">
					<text class="text success" @click="toUrl(`/subPages/invoice/invoice?id=${item.id}`)">开发票</text>
				</template>
				<template v-if="type=='1'">
					<template
						v-if="item.order_status===3 ||item.order_status===5 ||item.order_status===6 ||item.order_status===7">
						<text class="text"
							@click.stop="toUrl(`/subPages/refund/refund?id=${item.id}&orderNum=${item.order_no}`)">申请退款</text>
					</template>
				</template>

				<template v-if="item.order_status===5 ||item.order_status===4">
					<text class="text success" @click.stop="btnClick(2,item.id)">确认收货</text>
				</template>

				<template v-if="item.order_status===6">
					<text class="text success"
						@click.stop="toUrl(`/subPages/evaluation/evaluation?id=${item.id}`)">去评价</text>
				</template>

				<!-- 退款订单 -->
				<template v-if="item.order_status===12">
					<text class="error">{{item.apply_type, item.apply_status, item.remit_status | refoudName}}</text>
				</template>
			</view>

		</view>
		<MessageBox :showFlag="showFlag" @MesBoxCallback="callback" @popupClose="showFlag=false" />
	</view>
</template>

<script>
	import MessageBox from '@/components/MessageBox/MessageBox.vue'
	export default {
		components: {
			MessageBox
		},
		data() {
			return {
				title: "",
				type: null, //订单类型:1=商品订单,2=服务订单,3=薅羊毛订单
				statusId: null,
				tabsList: [],
				tabsActive: 0, //tabs索引
				orderList: [], //订单列表
				showFlag: false, //确认框弹出层
				funNum: null, //用户区分操作
				funId: null, //操作id
				last_page: null, // 总页数
				page: 1, //当前页
				is_kaipiao: null
			};
		},
		filters: {
			// 订单下对商品件数
			allNum(value) {
				let sum = 0
				value.forEach(item => {
					sum += item.pay_num
				})
				return sum
			},
			// 所有商品名称
			allName(value) {
				return value.map(item => item.goods_name).join('、')
			},
			// 订单状态
			status(value) {
				//1=待付款,2=待服务,3=待发货,4=待自提,5=待收获,6=待评价,7=已完成,11=已取消,12=退货
				switch (value) {
					case 1:
						return "待付款"
						break;
					case 2:
						return "待服务"
						break;
					case 3:
						return "待发货"
						break;
					case 4:
						return "待自提"
						break;
					case 5:
						return "待收货"
						break;
					case 6:
						return "待评价"
						break;
					case 7:
						return "已完成"
						break;
					case 11:
						return "已取消"
						break;
					case 12:
						return "退货"
						break;
					default:
						break;
				}
			},
			// 退货信息
			refoudName(apply_type, apply_status, remit_status) {
				switch (apply_type) {
					case 1: //退货退款  （已收货退款）
						if (apply_status == 1) return "待审核退货退款"
						if (apply_status == 2 && remit_status == 1) return "审核成功等待邮寄"
						if (apply_status == 2 && remit_status == 2) return "已邮寄,等待商家收货"
						if (apply_status == 2 && remit_status == 3) return "商家已确认收货"
						if (apply_status == 3) return "商家已拒绝"
						break;
					case 2: //退款  （未收到货退款）
						if (apply_status == 1) return "待审核退款"
						if (apply_status == 2 && remit_status == 2) return "同意退款,等待退款"
						if (apply_status == 2 && remit_status == 3) return "商家已退款"
						if (apply_status == 3) return "商家拒绝退款"
						break;
					default:
						break;
				}
			}
		},
		onLoad(option) {
			// console.log(option);
			this.type = option.type
			switch (option.type) {
				case '1':
					this.title = "订单列表"
					this.tabsList = [{
						id: null,
						name: '全部订单',
					}, {
						id: 1,
						name: '待付款',
					}, {
						id: 3,
						name: '待发货'
					}, {
						id: 5,
						name: '待收货'
					}, {
						id: 6,
						name: '待评价'
					}, {
						id: 7,
						name: '已完成'
					}, {
						id: 11,
						name: '已取消'
					}, {
						id: 12,
						name: '退货'
					}]
					break;
				case '2':
					this.title = "服务订单"
					this.tabsList = [{
						id: null,
						name: '全部订单',
					}, {
						id: 1,
						name: '待付款',
					}, {
						id: 2,
						name: '待服务',
					}, {
						id: 7,
						name: '已完成'
					}, {
						id: 6,
						name: '待评价'
					}, {
						id: 11,
						name: '已取消'
					}, ]
					break;
				case '3':
					this.title = "薅羊毛列表"
					this.tabsList = [{
						id: null,
						name: '全部订单',
					}, {
						id: 1,
						name: '待付款',
					}, {
						id: 5,
						name: '待收货'
					}, {
						id: 4,
						name: '待自提'
					}, {
						id: 6,
						name: '待评价'
					}, {
						id: 7,
						name: '已完成'
					}, {
						id: 11,
						name: '已取消'
					}]
					break;
				default:
					break;
			}

		},
		onShow() {
			this.tabsActive = 0
			this.getOrderList(null)
		},
		async onReachBottom() {
			if (this.page < this.last_page) {
				this.page++
				let res = await this.$api.getOrderList({
					type: this.type,
					status: this.statusId,
					total: 8,
					page: this.page,
				})
				this.orderList.push(...res.data.data)
			} else {
				this.$u.toast('已经到底了！')
			}
		},
		methods: {
			// tabs点击
			tabsClick(e) {
				// console.log(e);
				this.statusId = e.id
				this.page = 1
				this.getOrderList(e.id)
			},
			// 跳转
			toUrl(url) {
				uni.navigateTo({
					url
				})
			},
			// 订单点击
			itemClick(item) {
				if (item.order_status === 12) {
					// 退款商品 跳往单独页面
					uni.navigateTo({
						url: `/subPages/refundResult/refundResult?id=${item.id}`
					})
				} else {
					// 正常商品
					uni.navigateTo({
						url: `/subPages/orderDetails/orderDetails?id=${item.id}`
					})
				}
			},
			// 获取订单列表
			async getOrderList(status) {
				let res = await this.$api.getOrderList({
					type: this.type,
					status,
					total: 8,
					page: 1,
				})
				this.orderList = res.data.data
				this.last_page = res.data.last_page
				// this.is_kaipiao = res.data.data.is_kaipiao

				// console.log(res.data.data);
			},
			// 操作按钮
			btnClick(num, id) {
				this.showFlag = true
				this.funNum = num
				this.funId = id
			},
			// 弹出层确认回调
			async callback() {
				if (this.funNum === 1) {
					let res = await this.$api.offorder({
						id: this.funId
					})
					this.$u.toast(res.msg)
					// console.log(res)
				} else {
					let res = await this.$api.conorder({
						id: this.funId
					})
					this.$u.toast(res.msg)
					// console.log(res)
				}

				this.showFlag = false
				setTimeout(() => {
					this.tabsActive = 0
					this.getOrderList(null)
				}, 1500)
			}
		}
	}
</script>
<style>
	page {
		box-sizing: border-box;
		padding-bottom: 150rpx;
	}
</style>

<style lang="scss" scoped>
	.tabsBox {
		background-color: #fff;
	}

	.goodItem {
		&-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: rgba(0, 0, 0, 0.26);
			font-size: 22rpx;
			font-weight: 400;

			.titleYes {
				color: #806EFE;
			}
		}

		&-main {
			margin-top: 22rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;

			image {
				width: 144rpx;
				height: 144rpx;
				border-radius: 16rpx;
			}

			.center {
				flex: 1;
				color: rgba(50, 50, 51, 1);
				font-size: 26rpx;
				font-weight: 400;
				margin-left: 16rpx;
			}

			.right {
				margin-left: 100rpx;
				color: rgba(50, 50, 51, 1);
				font-size: 30rpx;
				font-weight: 500;
				text-align: right;
			}
		}

		&-footer {
			margin-top: 24rpx;
			text-align: right;

			.text {
				padding: 16rpx 32rpx;
				display: inline-block;
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(100, 101, 102, 1);
				border: 1rpx solid rgba(200, 201, 204, 1);
				border-radius: 46rpx;
				margin-left: 24rpx;
			}

			.success {
				color: $textColor;
				border: 1rpx solid $boxBg;
			}

			.error {
				color: #FC4338;
			}
		}
	}

	.textColor {
		color: rgba(0, 0, 0, 0.26) !important;
	}
</style>